<template>
  <div
    class="spee-wrap"
  >
  <div class="btn-wrap" @click="onOpen">
    <span class="btn-icon">语音</span>
  </div>
  <u-modal :duration="10" :showCancelButton="true" :show="showModal" cancelText="取消" confirmText="确认"  @confirm="clickConfirm"
      @cancel="onCancel" >
			<view class="slot-content">
        <div class="title-wrap">语音识别</div>
        
				<div class="txt-content">
          <div class="txt-self">{{ contentTxt  }} </div>
            <div v-if="startStatus" class="time-box">
              <span class="start-taste-line">
                <hr class="hr1" />
                <hr class="hr2" />
                <hr class="hr3" />
                <hr class="hr4" />
                <hr class="hr5" />
                <hr class="hr6" />
                <hr class="hr7" />
                <hr class="hr8" />
                <hr class="hr9" />
                <hr class="hr10" />
              </span>
          </div>
         <div class="footer"> 
          <span @click="clickSpeechBtn" class="action-btn">{{startStatus ? '结束识别' : '开始识别'}}</span>
        </div>
        </div>
			</view>
		</u-modal>
  </div>
</template>

<script>

var plugin = requirePlugin("WechatSI")
let manager = plugin.getRecordRecognitionManager()




export default {
  name: "Speecher",
  components: {
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      contentTxt: '',
      startStatus: false,
      showModal: false,
    }
  },
  mounted(){
    const that = this;
    manager.onRecognize = function(res) {
        console.log("current result", res.result)
    }
    manager.onStop = function(res) {
        console.log("record file path", res.tempFilePath)
        console.log("result", res.result)
        that.contentTxt = res.result
    }
    manager.onStart = function(res) {
        console.log("成功开始录音识别", res)
    }
    manager.onError = function(res) {
        console.error("error msg", res.msg)
    }

  },
  watch: {
    // 然后再监听 value 变化，从tasks中删除对应的照片
    value(vals) {
   
    },
   
  },
  methods: {
    onOpen() {
      this.$emit("onclick")
      this.startStatus = false
      this.contentTxt = ''
      this.showModal = true
    },
    clickSpeechBtn() {
      this.startStatus = !this.startStatus
      if(this.startStatus){
        this.contentTxt = ''
        manager.start({duration:30000, lang: "zh_CN"})
      }else{
        manager.stop();
      }
    },
    onTaskDelete(task) {
      this.tasks = this.tasks.filter(x => x.id !== task.id)
    },
    clickConfirm() {
      if(!this.contentTxt) return;
      let str  = String(this.contentTxt);
      // 去掉最后的标点，如句号
      str = str.replace(/(.*)[，。（）【】{}！,.]{1}/, '$1')
      this.$emit("handler", str)
      // wx.setClipboardData({
      //   data: str,
      //   success (res) {
      //     console.log(res) // data
      //   },
      //   fail (res) {
      //     console.log(res) // data
      //   },
      // })
      this.showModal=false
    },
    onCancel() {
      this.showModal=false
      this.startStatus =false
      manager.stop();
    },
  },
}
</script>

<style lang="less">
.spee-wrap {
  .btn-wrap{
    position: fixed;
    display: inline-block;
    top: 220px;
    right: 10px;
    height: 30px;
    width: 40px;
    line-height: 30px;
    text-align: right;
    z-index: 10000;
    margin-right: -5px;
  }
  .btn-icon{
    display: inline-block;
    height: 20px;
    width: 30px;
    text-align: right;
    line-height: 20px;
    text-align: center;

    border-bottom-left-radius: 7px;
    border-top-left-radius: 11px;
    border-bottom-right-radius: 13px;
    border-top-right-radius: 1px;
    color: white;
    background: rgb(1 111 253);
    font-size: 10px;
  }
  .action-btn{
    background: rgb(1 111 253);
    color: white;
    display: inline-block;
    padding: 6px 9px;
    border-radius: 5px;
    font-size: 15px;
  }
  .slot-content{
  }
  .footer{
    margin-bottom: -8px;
    text-align: center;
  }
  .title-wrap{
    font-size: 17px;
    font-weight: 500;
    margin-top: -11px;
    margin-bottom: 20px;
    text-align: center;
    color: rgb(1 111 253);
  }
  .txt-self{
    margin-bottom: 10px;
  }
 
  



  .time-box {
    text-align: center;
    margin-bottom: 20px;
            hr {
                    background-color:  rgb(1 111 253);  //声波颜色
                    width: 3px;
                    height: 3px;
                    margin: 0 0.03rem;
                    display: inline-block;
                    // border-radius: 1px;
                  }
          }
          hr {
            animation: note 0.6s ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          }

          .hr1 {
            animation-delay: -3s;
          }

          .hr2 {
            animation-delay: -2.9s;
          }

          .hr3 {
            animation-delay: -2.4s;
          }

          .hr4 {
            animation-delay: -2.1s;
          }

          .hr5 {
            animation-delay: -1.8s;
          }

          .hr6 {
            animation-delay: -1.5s;
          }

          .hr7 {
            animation-delay: -1.2s;
          }

          .hr8 {
            animation-delay: -0.9s;
          }

          .hr9 {
            animation-delay: -0.6s;
          }

          .hr10 {
            animation-delay: -0.3s;
          }

          @keyframes note {
            from {
              transform: scaleY(1);
            }
            to {
              transform: scaleY(4);
            }
          }




}
</style>